<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #2c3e50;
      perspective: 2000px;
      /* 3D透视空间 */
      overflow: hidden;
    }

    .scroll-container {
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    .page {
      position: absolute;
      width: 80%;
      height: 80%;
      background: white;
      border-radius: 15px;
      transform-origin: left center;
      transition:
        transform 1s cubic-bezier(0.23, 1, 0.32, 1),
        filter 0.8s ease,
        box-shadow 0.8s ease;
      box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.3),
        20px 0 30px -10px rgba(0, 0, 0, 0.2);
      filter: blur(8px) brightness(0.8);
      opacity: 0.7;
    }

    /* 当前激活页样式 */
    .page.active {
      filter: none;
      opacity: 1;
      z-index: 3;
      box-shadow:
        0 35px 60px rgba(0, 0, 0, 0.4),
        30px 0 50px -15px rgba(0, 0, 0, 0.3);
    }

    /* 层叠位置与模糊渐变 */
    .page:nth-child(1) {
      transform: translateX(10%) rotateY(-5deg) scale(0.95);
      z-index: 1;
    }

    .page:nth-child(2) {
      transform: translateX(30%) rotateY(-10deg) scale(0.9);
      z-index: 2;
    }

    .page:nth-child(3) {
      transform: translateX(50%) rotateY(-15deg) scale(0.85);
      z-index: 3;
    }
  </style>
</head>

<body>
  <div class="scroll-container">
    <div class="page active" style="background:#ff9a9e;">Page 1</div>
    <div class="page" style="background:#fad0c4;">Page 2</div>
    <div class="page" style="background:#a1c4fd;">Page 3</div>
  </div>

  <script>
    const pages = document.querySelectorAll('.page');
    let currentIndex = 0;

    // 自动滚动函数
    function autoScroll() {
      pages[currentIndex].classList.remove('active');

      // 动态模糊与层级调整
      pages.forEach((page, index) => {
        const distance = Math.abs(index - currentIndex);
        page.style.filter = `blur(${distance * 3}px) brightness(${1 - distance * 0.2})`;
        page.style.zIndex = pages.length - distance;
      });

      currentIndex = (currentIndex + 1) % pages.length;
      pages[currentIndex].classList.add('active');
    }

    // 初始化动画
    setInterval(autoScroll, 3000);
  </script>
</body>

</html>